<!-- Copyright 2022 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<head>
  <link href="./index.css" rel="stylesheet">
  <style>
    :host {
      --flame-category-width: 40px;
    }
    .panelBody {
      display: flex;
      flex-direction: column;
    }

    #overview {
      flex: 0 0 25px;
    }

    .tableContainer {
      position: relative;
      overflow-y: scroll;
      flex-grow: 1;
    }

    #flameChart {
      --height: 400px;
      flex: 0 0 var(--height);
      height: var(--height);
      width: 100%;
      position: relative;
      overflow: scroll;
    }

    #table thead {
      position: sticky;
      top: 0px;
      background-color: var(--surface-color);
    }

    #flameChart div {
      position: absolute;
      font-size: 8px;
      line-height: 10px;
      vertical-align: middle;
    }

    #flameChartFlames div {
      height: 10px;
      border: 1px var(--border-color) solid;
      font-family: var(--code-font);
      color: var(--on-primary-color);
      overflow: hidden;
      text-align: left;
    }

    #flameChartFlames div:hover {
      border: 1px var(--background-color) solid;
    }

    #flameChart > div {
      box-sizing: border-box;
      overflow: visible;
      color: var(--on-surface-color);
      padding-right: 5px;
      text-align: right;
    }

    #flameChartSelected, #flameChartIn, #flameChartOut  {
      width: var(--flame-category-width);
    }
    #flameChartIn {
      /* bottom-right align the text */
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
    }

    #flameChartFlames {
      top: 0xp;
      left: var(--flame-category-width);
    }


    #table .r {
      text-align: right;
    }

    /* SVG */
    .fsIn {
      background-color: bisque;
    }

    .fsOut {
      background-color: lightblue;
    }

    .fsMain {
      background-color: var(--primary-color);
    }
    #table .nm {
      font-family: var(--code-font);
      font-size: var(--code-font-size);
    }
    #table .aC { /* arrow closed */
      transition: transform 0.2s ease-out 0s;
      user-select: none;
    }
    #table .aO { /* arrow opened */
      transform: rotate(90deg);
      transition: transform 0.2s ease-out 0s;
      user-select: none;
    }

  </style>
</head>

<div class="panel">
  <input type="checkbox" id="closer" class="panelCloserInput" checked>
  <label class="panelCloserLabel" for="closer">▼</label>
  <h2>Profiler</h2>
  <div class="selection">
    <input type="radio" id="show-all" name="selectionType" value="all" checked >
    <label for="show-all">All</label>
    <input type="radio" id="show-timerange" name="selectionType" value="timerange">
    <label for="show-timerange">Time Range</label>
    <input type="radio" id="show-selection" name="selectionType" value="selection">
    <label for="show-selection">Last Selection</label>
  </div>

  <div id="body" class="panelBody">
    <timeline-overview id="overview"></timeline-overview>

    <div class="tableContainer">
      <table id="table">
        <thead>
          <tr>
            <td colspan="2">Self</td>
            <td colspan="2">Total</td>
            <td></td>
            <td>Type</td>
            <td>Name</td>
            <td>SourcePosition</td>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>

    <div id="flameChart">
      <div id="flameChartIn">IN↧</div>
      <div id="flameChartSelected">Pivot</div>
      <div id="flameChartOut">OUT↧</div>
      <div id="flameChartFlames"></div>
    </div>

  </div>
</div>
